<!DOCTYPE html>
<style>
span.error {
	color: red;
}
	/* body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} */
	#allmap{width:100%;height:500px;}
</style>
<section class="content-header" style="padding: 3px 15px 0 15px;">
	<ol class="breadcrumb" id="nav_title"
		style="position:static;float:none;margin-bottom: 5px;">
		<li class="active"><i class="fa fa-home"
			style="font-size:20px;position:relative;top:2px;left:-3px;"></i>
			&nbsp; <a href="${rc.contextPath}/sys/index">首页</a></li>
		<li class="active">可溯源中心</li><li class="active">溯源轨迹信息</li>
	</ol>
</section>
<div class="container-fluid">
	<div class="box box-primary">
		<div id="toolbar">
			<div class="btn" style="background:#3399fe;color:#fff;height: 35px;">
				<label class="dirlabel" style="margin-top:1px;"><input type="radio" id="status0" name="status" value="0" checked="checked">&nbsp;出售 &nbsp;</label>
				<label class="dirlabel"><input type="radio" id="status1" name="status" value="1" >&nbsp;租赁&nbsp;</label>
				<label class="dirlabel"><input type="radio" id="status2" name="status" value="2" >&nbsp;竞拍</label>
			</div>
		</div>
		<div class="row">
			<table id="table" data-toggle="table" data-url="selectShopSellInfoByuserIdStatus" data-striped="true" data-toolbar="#toolbar" data-query-params="queryParams" data-pagination="true" data-search="true" data-page-size="10">
				<thead>
					 <tr>
					    <th data-checkbox="true"></th>
				        <th data-align="center" data-field="shop_id" data-sortable="true">商品编号</th>
				        <th data-align="center" data-field="shop_name" data-sortable="true">商品名称</th>
				        <th data-align="center" data-field="shop_price" data-sortable="true">商品价格</th>
				       <!--  <th data-align="center" data-formatter="state">商品图片</th> -->
				        <th data-align="center" data-formatter="operating_status" data-events="operateEvents">操作</th>
				      </tr> 
			    </thead>
			</table>
		</div>
	</div>
</div>
<!-- 详情弹窗 -->
<div class="modal fade" id="modal-detail" aria-labelledby="modalLabel" aria-hidden="true" tabindex="-1">
	<div class="modal-dialog" style="width:900px;">
		<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h4 class="modal-title" id="modalEditLabel">轨迹详情</h4>
				</div>
				<div class="modal-body" id="allmap" style="width:880px; margin-top: 10px;margin-bottom: 10px;margin-left: 10px;margin-right: 10px;">
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default closeBtn" data-dismiss="modal">关闭</button>
				</div>
		</div>
	</div>
</div>
<customScript> 
	<script type="text/javascript" src="${rc.contextPath}/views/admin/business/trail.js"></script> 
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=g3khG0aWSlg420EYMthBspIw4rYpCG7r"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>

	<script type="text/javascript">
	var shopTrailList = null;
   	window.operateEvents = {
    	'click .detail':function(e, value, row, index){
    		
    		var shopId = row.shop_id;
    		
    		$.post("shopTrailListById",{shopId : shopId},function(data){
    			shopTrailList = data;
    			console.log("1"+ shopTrailList);
    		},"json");
    		
	    	 setTimeout(function() {
    		    var map = new BMap.Map("allmap");
    	 		var myCity = new BMap.LocalCity();
    			myCity.get(function(res){
    				map.centerAndZoom(res.center,res.level); 
    			});  
		    			
    			var overView = new BMap.OverviewMapControl();
    			//BMAP_ANCHOR_BOTTOM_RIGHT	控件将定位到地图的右下角
    			var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
    			
    			map.addControl(overView);          //添加默认缩略地图控件
    			map.addControl(overViewOpen);      //右下角，打开
    			
    			//开启鼠标滚轮缩放
    			map.enableScrollWheelZoom(true);  
		    			
    	 		// 编写自定义函数,创建标注
    			function addMarker(point,i,content){
    			  var marker = new BMap.Marker(point);
    			  map.addOverlay(marker);
    			  addClickHandler(content,marker);
    			  if(i == 0){
  					marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  					//panTo()方法将让地图平滑移动至新中心点 如果移动距离超过了当前地图区域大小，则地图会直跳到该点
  	    		    window.setTimeout(function(){  
  	    			  map.panTo(point);    
  	    			}, 1000); 
  				  }
    			}
    			
    			var points =[];
    			var data_infos = [];
    			for(var i in shopTrailList)
    			{
    				var data_info = "data_info_" + i;
    				data_info = [shopTrailList[i].xCoo,shopTrailList[i].yCoo,shopTrailList[i].user.userName,shopTrailList[i].userInfo.phone];
    				data_infos[i] = data_info;
    			}

    			var opts = {
    					width : 250,     // 信息窗口宽度
    					height: 80,     // 信息窗口高度
    					title : "客户信息" , // 信息窗口标题
    					enableMessage:true//设置允许信息窗发送短息
    				   };
    			
    			for(var i in shopTrailList)
    			{
    				var point = "point_" + i;
    				point = new BMap.Point(data_infos[i][0],data_infos[i][1]);
    				var content1 = data_infos[i][2];
    				var content2 = data_infos[i][3];
    				// 逆地理编码
    				var geoc = new BMap.Geocoder();
    				  geoc.getLocation(point, function (rs) {
    			　　　　　　　　var addComp = rs.addressComponents;
    			　　　　　　　      address = addComp.province + "-" + addComp.city + "-" + addComp.district + "-" + addComp.street + "-" + addComp.streetNumber;
    			　　　　　　　　//对应的省市区、县街道，街道号
    			
    			　　　　});
    				  
						var content = "姓名："+content1+"，"+"手机号：" + content2+" 地址："+address;
						
						addMarker(point,i,content);
						points[i] = point;
    		
    			}
    			
    			function addClickHandler(content,marker){
    				marker.addEventListener("click",function(e){
    					openInfo(content,e)}
    				);
    			}
    			function openInfo(content,e){
    				var p = e.target;
    				var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
    				var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
    				map.openInfoWindow(infoWindow,point); //开启信息窗口
    			}
    			
    			var curve = new BMapLib.CurveLine(points, {strokeColor:"black", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
    			map.addOverlay(curve); //添加到地图中
//		    	curve.enableEditing(); //开启编辑功能	
		 			
    			//添加延时加载。解决问题
    			$('#modal-detail').modal('toggle');
    		 },300);
	     }
   	} 
	    
	</script>

</customScript>

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 